<template>
  <div class="action_bar">
    <div class="search">
      <el-input
        class="input"
        v-model="form.resourceName"
        placeholder="资源名称"
        clearable
        @keyup.enter.native="$emit('search-click', form)"
      />
      <el-input
        class="input"
        v-model="form.name"
        placeholder="部署名称"
        clearable
        @keyup.enter.native="$emit('search-click',form)"
      />
    </div>
    <div class="button_group">
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="$emit('search-click', form)"
      >搜索</el-button>
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        @click="goToPath(`${$route.path}/insert`)"
      >创建流程</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        resourceName: '',
        name: ''
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.action_bar
  display flex
  .search
    display flex
    .input
      margin-right 10px
      max-width 300px
</style>
